<template>
    <div class="container">
      <div class="row">
        <img :src="calendar"></img>
        <span>{{ number }}</span>
      </div>
      <div class="row">
        <div class="button">预览</div>
        <div class="button">导出</div>
      </div>
    </div>
  </template>
  
  <script setup>
  
  import calendar from "@/assets/mapicon/calender.png"
  
  const res = defineProps({
    number: String,
  });
  
  let { number } = toRefs(res);

  </script>
  
  <style scoped>
  .container{
      border: 1px solid gray;
      width: 200px;
      height: 200px;
  }
  
  img{
      width: 100px;
      height: 100px;
  }
  
  .row {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
  }
  
  .row span{
      font-size: 26px;
  }
  
  .button{
      margin-top: 10px;
      font-size: 22px;
  }
  </style>
  